<template>
  <div class="container">
    <div class="title">
      <el-input
        v-model="blogData.blogTitle"
        size="large"
        placeholder="请输入标题"
      ></el-input>
    </div>
    <div style="border: 1px solid #ccc">
      <BaseEditor v-model="blogData.blogContent"></BaseEditor>
      <div class="core">
        <el-button class="btn" @click="onPreview">预览</el-button>
        <el-button class="btn" @click="onSave">保存</el-button>
        <el-button class="btn" type="primary" @click="onIssue">发布</el-button>
      </div>
    </div>
    <HomeNav :options="['full']"></HomeNav>
    <BaseModal
      :visible="blogModalShow"
      :key="uuid4()"
      title="分类"
      okText="提交"
      @handleCancel="handleCancel"
      @handleOk="handleOk"
    >
      <BaseSelect
        label="标签"
        v-model="blogData.blogType"
        :options="blogTypeStatus"
      ></BaseSelect>
      <BaseSelect
        label="类型"
        v-model="blogData.blogBelong"
        :options="blogBelongStatus"
      ></BaseSelect>
      <BaseTextArea
        label="引言"
        v-model="blogData.blogTitleInfo"
      ></BaseTextArea>
    </BaseModal>
  </div>
</template>

<script lang="ts" setup name="FormEditor">
import * as api from "@/api/index";
import { HomeNav } from "@components/HomeComponents/index";
import { ref } from "vue";
import { v4 as uuid4 } from "uuid";
import {
  BaseModal,
  BaseSelect,
  BaseTextArea,
  BaseEditor,
} from "@components/BaseForm/index";
import { ElMessage as message } from "element-plus";
import router from "@/router/index";
// 弹窗状态
let blogModalShow = ref(false);
// 标签状态
let blogTypeStatus = [
  [1, "分享"],
  [2, "求助"],
];

let blogData = ref({
  blogType: 1,
  blogBelong: 9,
  blogContent: "",
  blogTitleInfo: "",
  blogTitle: "",
});

// 类型状态
let blogBelongStatus = [
  [1, "Vue"],
  [2, "React"],
  [3, "Node"],
  [4, "Mongodb"],
  [5, "Uni-app"],
  [6, "小程序"],
  [7, "CSS"],
  [8, "JaveScript"],
  [9, "其他"],
];

// 保存
const onSave = () => {
  let el = document.documentElement;
  el.requestFullscreen ? el.requestFullscreen() : null;
};

// 发布
const onIssue = () => {
  blogModalShow.value = true;
};

let getDetail = (blogId: string) => {
  if (blogId) {
    // 文章ID存在 则请求数据
    api.User.blogDetail({ blogId }).then((res: any) => {
      blogData.value = { ...res.body };
    });
  }
};

// 预览
const onPreview = () => {
  router.push("/note/blog-view");
};

let handleCancel = () => {
  blogModalShow.value = false;
};

let handleOk = () => {
  api.User.blogIsSue(blogData.value).then((res) => {
    if (res.header.code === 999) {
      handleCancel();
      message.success(res.header.message || "发布成功");
      router.push("/note/blog-list");
    }
  });
};
</script>

<style lang="less" scoped>
.container {
  padding: 0px 20px;
  box-sizing: border-box;
}
.title {
  height: 44px;
  border-bottom: 1px solid #f9f9f9;
  margin-bottom: 6px;
}
.core {
  display: flex;
  height: 50px;
  justify-content: right;
  align-items: center;
  .btn {
    margin-right: 24px;
  }
}
</style>
